<template>
	<div>
		<el-form :model="form.editUserInfo" :rules="rules.editUserInfo" ref="form.editUserInfo">
			
			<el-form-item label="用户名" :label-width="formLabelWidth" prop="account_name">
		      <el-input v-model="form.editUserInfo.account_name" :disabled="true"></el-input>
			</el-form-item>



			<el-form-item label="姓名" :label-width="formLabelWidth" prop="user_name">
		      <el-input v-model="form.editUserInfo.user_name"></el-input>
			</el-form-item>

		    
		</el-form>

		<div slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="openDialog('editUserInfoConfirmDialog')">修 改</el-button>
		</div>


		<!-- 修改确认对话框 -->
		<el-dialog title="修改确认提示" :visible.sync="dialog.editUserInfoConfirmDialog.open" size="tiny">
		  <span>确定要修改吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog('editUserInfoConfirmDialog')">取 消</el-button>
		    <el-button type="primary" @click="dialogBtnOk('editUserInfoConfirmDialog')">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import _http from '../common/http.vue'

export default{
	data(){
		return {
			dialog:{
				editUserInfoConfirmDialog:{
					open:false
				}
			},
			form:{
				editUserInfo:{
					userId:0,
					account_name:'',
					user_name:''
				}
			},
			rules:{
				editUserInfo:{
					user_name:[
						{required:true,message:'请填写用户名'}
					]
				}
			},
			formLabelWidth:'120px'
		}
	},
	mounted(){
		this.form.editUserInfo.userId = localStorage.getItem('userId')
		this.getUserInfo()
	},
	methods:{
		openDialog(dialog){
			_http.formValidate(this,'form.editUserInfo',(valid)=>{
				if (!valid) {return false}
				this.dialog[dialog].open = true
			})
		},
		closeDialog(dialog){
			this.dialog[dialog].open = false
		},
		dialogBtnOk(dialog){
			if (dialog == 'editUserInfoConfirmDialog') {
				this.editUserInfo(dialog)
			}
		},
		getUserInfo(){
			_http.axiosRequest(this,'getUserInfo',{id:this.form.editUserInfo.userId},(res)=>{
				this.form.editUserInfo.account_name = res.data.account_name
				this.form.editUserInfo.user_name = res.data.user_name
			})
		},
		editUserInfo(dialog){
			
			_http.axiosRequest(this,'editUserInfoFromUser',{form:this.form.editUserInfo},(res)=>{
				if(_http.apiResult(this,res.data)){
					this.closeDialog(dialog)
				}
			})
		}
	}
}	
</script>

<style>
.dialog-footer{
	text-align: center;
}	
</style>